<template>
	<div class="content">
		<div class="contanier">
			<div class="nav">
				<span> 您当前的位置： </span>
				<a @click="$router.push({ name: 'Exam' })">考试系统</a> /
				<span> 考试报名 </span>
			</div>
			<div class="main">
				<el-col :span="4" class="leftnav">
					<router-link class="navitem" active-class="active" to="/join/apply">考试报名</router-link>
					<span class="bbottom"></span>
					<router-link class="navitem" active-class="active" to="/join/document">考试文件</router-link>
					<!-- <span class="bbottom"></span>
					<router-link class="navitem" active-class="active" to="/join/cert">准考证打印</router-link>
					<span class="bbottom"></span>
					<router-link class="navitem" active-class="active" to="/join/check">成绩查询</router-link> -->
				</el-col>
				<el-col :span="20">
					<div style="width:100%;height:auto;background-color: #fff;">
						<router-view></router-view>
					</div>
				</el-col>
			</div>
			
		</div>
		<nav-footer style="position: absolute;bottom: 0;"></nav-footer>
	</div>
</template>
<script>
	import { mapState, mapMutations } from "vuex";
	import NavFooter from '../../components/footer.vue'
	export default {
		components: { NavFooter, },
		data() {
			return {

			};
		},
		computed: {
			...mapState(["isLogin", "user"]),
		},
		mounted() {},

		methods: {
			...mapMutations([
				"showLoginDialog",
				"changeDialogType",
				"changeUserCredit",
			]),
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		},
	};
</script>
<style lang="less" scoped>
	.content {
		width: 100%;

		.contanier {
			width: 1200px;
			margin: 0 auto;
			overflow: hidden;
			.nav {
				width: 1200px;
				margin: 0 auto;
				height: 16px;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 16px;
				color: #999999;
				line-height: 16px;
				margin-top: 30px;
				margin-bottom: 30px;
			
				a {
					height: 16px;
					font-size: 16px;
					font-weight: 400;
					color: #999999;
					line-height: 16px;
					margin-right: 6px;
			
					&:not(:first-of-type) {
						margin-left: 6px;
					}
				}
			
				span {
					height: 16px;
					margin-left: 6px;
					font-size: 16px;
					font-weight: 400;
					color: #666666;
					line-height: 16px;
				}
			}
			.main{
				width:100%;
				display: flex;
				flex-direction: row;
				box-sizing: border-box;
				.leftnav{
					padding-right: 25px;
					display:flex;
					flex-direction: column;
					.bbottom{
						width:100%;
						height:2px;
						background-color:#eeeeee;
					}
					.navitem{
						width:100%;
						height:52px;
						display:flex;
						justify-content: flex-start;
						padding-left: 40px;
						box-sizing: border-box;
						align-items:center;
						font-size:17px;
						color:#666;
						border:none;
						background-color:#fff;
						&.active{
							background-color: #134b9f;
							color:#fff;
						}
					}
					
				}
			}

		}
	}
</style>
